<template>
  <div class="modification">
    <div class="search-wrapper">
      <span>名字</span>
      <div class="search-input">
        <el-input v-model="name" size="medium" placeholder="请输入名字"></el-input>
      </div>
      <span>修改时间</span>
      <div class="block">
        <el-date-picker
          v-model="time"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          :editable="false"
        ></el-date-picker>
      </div>
      <el-button type="primary" :loading="isLoading" @click="clickOk">点击搜索</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      height="750"
      size="medium"
      v-loading="isLoading"
    >
      <el-table-column fixed prop="insertDate" label="日期" width="150"></el-table-column>
      <el-table-column prop="modifyItem" label="修改项" width="400"></el-table-column>
      <el-table-column prop="modifyBefore" label="修改前" width="850"></el-table-column>
      <el-table-column prop="modifyAfter" label="修改后" width="850"></el-table-column>
    </el-table>
  </div>
</template>
<script>
import { queryModify } from "@/api/modification.js";
export default {
  data() {
    return {
      time: "",
      tableData: [], //表格数据
      isLoading: false, // 标识是否处于加载状态
      name: ""
    };
  },
  methods: {
    clickOk() {
      if (this.time == null) {
        this.time = "";
      }
      this.isLoading = true;
      queryModify({ name: this.name, insertDate: this.time }).then(res => {
        setTimeout(() => {
          this.isLoading = false;
        }, 1000);
        if (res.data.success) {
          this.$message({
            showClose: true,
            message: "查询成功",
            type: "success"
          });
          this.tableData = res.data.data;
          res.data.data.forEach((item, i) => {
            let a = this.modifyAfter(JSON.parse(item.modifyAfter));
            let b = this.modifyAfter(JSON.parse(item.modifyBefore));
            this.tableData[i].modifyAfter = JSON.stringify(a);
            this.tableData[i].modifyBefore = JSON.stringify(b);
          });
        } else {
          // if()
          if (this.name == "" && this.time != "") {
            this.$message({
              showClose: true,
              message: "输入的时间暂时没有修改记录，已显示最近所有的修改记录",
              type: "warning"
            });
            this.tableData = res.data.data;
            res.data.data.forEach((item, i) => {
              let a = this.modifyAfter(JSON.parse(item.modifyAfter));
              let b = this.modifyAfter(JSON.parse(item.modifyBefore));
              this.tableData[i].modifyAfter = JSON.stringify(a);
              this.tableData[i].modifyBefore = JSON.stringify(b);
            });
          } else if (this.time == "" && this.name != "") {
            this.$message({
              showClose: true,
              message: "输入的姓名暂时没有修改记录，已显示最近所有的修改记录",
              type: "warning"
            });
            this.tableData = res.data.data;
            res.data.data.forEach((item, i) => {
              let a = this.modifyAfter(JSON.parse(item.modifyAfter));
              let b = this.modifyAfter(JSON.parse(item.modifyBefore));
              this.tableData[i].modifyAfter = JSON.stringify(a);
              this.tableData[i].modifyBefore = JSON.stringify(b);
            });
          } else {
            if (this.time == "" && this.name == "") {
              this.$message({
                showClose: true,
                message: "查询成功",
                type: "warning"
              });
              this.tableData = res.data.data;
              res.data.data.forEach((item, i) => {
                let a = this.modifyAfter(JSON.parse(item.modifyAfter));
                let b = this.modifyAfter(JSON.parse(item.modifyBefore));
                this.tableData[i].modifyAfter = JSON.stringify(a);
                this.tableData[i].modifyBefore = JSON.stringify(b);
              });
            } else {
              this.$message({
                showClose: true,
                message: "暂无修改记录",
                type: "warning"
              });
              this.tableData = [];
            }
          }
        }
      });
    },
    modifyAfter(obj) {
      console.log(obj);
      let a = {};
      a["地址"] = obj.address;
      a["姓名"] = obj.name;
      a["银行卡号"] = obj.bankCard;
      a["联系方式"] = obj.phone;
      a["身份证人像面"] = obj.idCardImg1;
      a["身份证国徽面"] = obj.idCardImg2;
      return a;
    }
  },
  created() {
    this.isLoading = true;
    queryModify({ name: "", insertDate: "" }).then(res => {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
      // let modifyAfter = JSON.parse(a.modifyAfter);
      this.tableData = res.data.data;
      res.data.data.forEach((item, i) => {
        let a = this.modifyAfter(JSON.parse(item.modifyAfter));
        let b = this.modifyAfter(JSON.parse(item.modifyBefore));
        this.tableData[i].modifyAfter = JSON.stringify(a);
        this.tableData[i].modifyBefore = JSON.stringify(b);
      });
    });
  }
};
</script>
<style scoped>
.modification {
  padding: 20px;
}
.search-wrapper {
  display: flex;
  align-items: center;
  margin: 10px;
}
.search-wrapper > * {
  margin-right: 10px;
}
.search-input {
  width: 200px;
}
</style>